<template>
  <div class="box">
    <h1>修改管理员信息</h1>
  
   <el-form :model="admanlist" label-width="120px"> 
    <el-form-item label="编号">
      <span>{{ admanlist.adminid }}</span>
    </el-form-item>
    <el-form-item label="姓名">
      <span>{{ admanlist.adminname }}</span>
    </el-form-item>
    <el-form-item label="密码">
      <el-input type="password" v-model="admanlist.password" />
    </el-form-item>
     <el-form-item label="角色">
        <el-radio-group v-model="admanlist.role">
        <el-radio :label="1">超级管理员</el-radio>
        <el-radio :label="2">普通管理员</el-radio>
      </el-radio-group>
    </el-form-item> 
    
      <p>
        <el-tree
          ref="treeRef"
          :data="data"
          show-checkbox
          node-key="id"
          highlight-current
        />
      </p>
   
    <el-form-item>
      <el-popconfirm
            confirm-button-text="Yes"
            cancel-button-text="No"
            :icon="InfoFilled"
            icon-color="#626AEF"
            title="亲,您确定修改嘛"
            @confirm="confirmEvent"
            @cancel="cancelEvent"
          >
            <template #reference>
              <el-button type="primary">修改</el-button>
            </template>
          </el-popconfirm>
    
    <el-button type="primary" @click="cancel">取消</el-button>
    </el-form-item>
    


    </el-form>
    </div>
    
    
    
</template>

<script setup lang="ts">
import { InfoFilled } from "@element-plus/icons-vue";
import { menudata as data } from "../../../grants/menudata";
import { ElMessage,ElTable,ElTree } from 'element-plus';
import { reactive, watch,ref } from "vue";
import service from "../../../utlis/service";
import "element-plus/es/components/notification/style/css";
import type { TreeKey } from "element-plus/es/components/tree/src/tree.type";

//声明属性
const props = defineProps<{
  adminname: string;
}>();
//声明事件
const emit = defineEmits<{
  (e: "hide"): void;
  (e: "updatesuccess"): void;
}>();

interface IAdmin {
  adminname: string;
  password: string;
  role: number; //1:表示超级管理员，2：普通管理员
  adminid: string;
  checkedKeys:TreeKey[];
}
//当前管理员的数据
const admanlist = reactive<IAdmin>({
  adminid: "",
  adminname: "",
  password: "",
  role: 1,
  checkedKeys: [],
});
const ElNotification: any = reactive([]);
//取消
const cancel = () => {
  // 触发隐藏事件
  emit("hide");
};
// 获取管理员的信息：根据adminname进行获取
const getAdmin = () => {
  service({
    url: "/admin/detail",
    params: {
      adminname: props.adminname,
    },
  }).then((res) => {
    if (res.data.code === "200") {
      admanlist.adminid = res.data.data[0].adminid;
      admanlist.adminname = res.data.data[0].adminname;
      admanlist.role = res.data.data[0].role;
      admanlist.checkedKeys = res.data.data[0].checkedKeys;
    }
  });
};
watch(
  props,
  () => {
    getAdmin();
    admanlist.password = "";
  },
  {
    deep: true,
  }
);
let  treeRef = ref<InstanceType<typeof ElTree>>();
 const confirmEvent = () => {
  //获取的是选中状态的菜单栏
  let arr:TreeKey[] = treeRef.value!.getCheckedKeys();
  //获取半夜的数据
  let halfArr:TreeKey[] = treeRef.value!.getCheckedKeys();
  arr =arr.concat(halfArr);
  admanlist.checkedKeys = arr

  console.log("arr",arr);
  
  service({
    url: "/admin/update",
    method: "post",
    data: {
      adminname: admanlist.adminname,
      password: admanlist.password,
      role: admanlist.role,
      checkedKeys: admanlist.checkedKeys,
    },
  }).then((res) => {
    if (res.data.code === "200") {
      emit("hide"); //关掉自己
      emit("updatesuccess");
    }
  });

 };
const cancelEvent = () => {};
</script>

<style scoped>
.box {
  width: 400px;
height: 500px;
  border: 1px solid #e5e4e4;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #ededed;
  z-index: 999;
}
.box h1 {
  text-align: center;
}
p{
  height: 100%;
 margin-left: 100px;
}
</style>